<!--
 * @Author       : qwguo
 * @description  : 部门设置增加删除
 * @Date         : 2020-11-03 09:45:19
 * @LastEditors  : qwguo
 * @LastEditTime : 2020-11-03 10:25:27
 * @FilePath     : \mlcc_web_project\mlcc-web-project\src\views\group-order\components\section-pane.vue
-->
<template>
    <div class="GO-section-wrap">
        <div class="btn-area">
            <el-button type="primary" @click="addDepartmentFun" icon="el-icon-plus" style="background: #2D2D2D;color: #e87114">新增采购项</el-button>
        </div>
        <!--部门数据列表 start-->
        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="序号" prop="id"  width="80" align="center" type="index"></el-table-column>
            <el-table-column prop="departName" label="采购项名称"></el-table-column>
            <el-table-column prop="consignee" label="收货人"></el-table-column>
            <el-table-column prop="phone" label="收货电话"></el-table-column>
            <el-table-column prop="address" label="收货地址"></el-table-column>
            <el-table-column prop="operate" label="操作" align="center">
                <template slot-scope="props">
                    <el-button type="text" size="small" :style="{ color: '#c00' }" @click="openquxiao(props.row)">删除</el-button>
                    <el-button type="text" size="small" @click="addDepartmentFun(props.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--部门数据列表 end-->
        <el-dialog title="新增采购项" :visible.sync="addDataDialog" width="630px" :close-on-click-modal="false" class="add-dialog">
            <el-form :model="addFrom" ref="addSectionForm" label-width="0" class="add-form">
                <el-form-item>
                   采购项名称 <el-input v-model="addFrom.departName" :style="{ width: '48%', marginRight: '2%' }" placeholder="请输入采购项名称"></el-input>
				    </el-form-item>
				    <el-form-item>
                   收货人姓名 <el-input v-model="addFrom.consignee" :style="{ width: '48%' }" placeholder="请输入收货人姓名"></el-input>
				    
                </el-form-item>
                <el-form-item>
                   收货电话&nbsp;&nbsp;&nbsp; <el-input v-model="addFrom.phone" :style="{ width: '48%', marginRight: '2%' }" placeholder="请输入收货电话"></el-input>
                </el-form-item>
                <el-form-item>
                   收货人地址 <el-input v-model="addFrom.address" placeholder="请填写收货人地址"></el-input>
                </el-form-item>
                <el-form-item>
                   备注信息 <el-input v-model="addFrom.remark" rows="4" type="textarea" placeholder="请填写备注信息"></el-input>
                </el-form-item>
                <el-form-item class="form-btn-area">
                    <el-button @click="addDataDialog = false">取 消</el-button>

                    <el-button type="primary" v-if="addFrom.id" @click="editDepartmentSubmit" style="background: #2D2D2D;color: #e87114">确 定</el-button>
                    <el-button type="primary" v-if="!addFrom.id" @click="addDepartmentSubmit" style="background: #2D2D2D;color: #e87114">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
		
		
		
		
		<!--取消订单的弹框-->
		          <el-dialog
		                  title="提示"
		                  :visible.sync="dialogVisible3"
		                  width="30%"
		          >
		              <span>确定删除采购项吗？</span>
		              <span slot="footer" class="dialog-footer">
		  <el-button @click="dialogVisible3 = false">取 消</el-button>
		  <el-button type="primary" @click="dialogVisible3 = false,deleteDepartmentFun()">确 定</el-button>
		</span>
		          </el-dialog>
				  
				  
    </div>
</template>

<script>
    let storage = window.localStorage;
    import { addDepartment, getDepartment, deleteDepartment, updateDepartment } from '@/api/group-order';
    export default {
        name: 'sectionPane',
        data() {
            return {
				id:'',
				dialogVisible3:false,
                //部门列表数据
                tableData: [],
                pageSize: 10,
                pageNo: 1,
                addDataDialog: false,
                addFrom: {
                    id: '',
                    departName: '',
                    consignee: '',
                    phone: '',
                    address: '',
                    remark: ''
                },
                curItem: null
            };
        },
        created() {
            /// 获取部门
            this.getDepartmentFun('show');
        },
        methods: {
			// 打开取消顶订单的弹框
			openquxiao(item) {
			    this.dialogVisible3 = true
			    this.id = item.id
			},
            /**
             * @Date: 2020-11-03 10:21:54
             * @LastEditors: qwguo
             * @LastEditTime: Do not edit
             * @description: 获取部门列表方法
             * @param {*}
             * @return {*}
             */
            getDepartmentFun(action) {
                let that = this;
                that.tableData.splice(0, that.tableData.length);
                getDepartment({
                    customerId: storage.getItem('customerId'),
                    pageSize: that.pageSize,
                    pageNo: that.pageNo
                }).then(res => {
                    if (res.status == 200 && res.data.code == 0) {
                        let getData = res.data.data;
                        getData.records.forEach(v => {
                            that.tableData.push(v);
                        });
                    }
                });
            },
            /**
             * @Date: 2020-11-02 23:01:23
             * @LastEditors: qwguo
             * @description: 打开添加弹窗
             * @param {type} 参数说明
             * @return: 返回值
             */
            addDepartmentFun(item) {
                let that = this;
                if (!storage.getItem('customerId')) {
                    // that.$message({
                    //     message: '请填写公司信息',
                    //     type: 'warning'
                    // });
					 that.$message.error('请填写公司信息');
                    return false;
                }
                if (item == 'add') {
                    this.addFrom.id = '';
                    this.addFrom.departName = '';
                    this.addFrom.consignee = '';
                    this.addFrom.phone = '';
                    this.addFrom.address = '';
                    this.addFrom.remark = '';
                } else {
                    this.addFrom.id = item.id;
                    this.addFrom.departName = item.departName;
                    this.addFrom.consignee = item.consignee;
                    this.addFrom.phone = item.phone;
                    this.addFrom.address = item.address;
                    this.addFrom.remark = item.remark;
                }
                this.addDataDialog = true;
            },
            /**
             * @Date: 2020-11-02 22:38:23
             * @LastEditors: qwguo
             * @description: 新增部门
             * @param {type} 参数说明
             * @return: 返回值
             */
            addDepartmentSubmit() {
                let that = this;
                addDepartment({
                    customerId: storage.getItem('customerId'),
                    ...that.addFrom
                }).then(res => {
                    if (res.status == 200 && res.data.code == 0) {
                        that.tableData.push({ ...that.addFrom });
                        that.addDataDialog = false;
                        that.$message.success('添加成功');
                        that.getDepartmentFun();
                    } else {
                        that.$message.warning(res.data.data);
                    }
                });
            },
            /**
             * @Date: 2020-11-02 23:18:08
             * @LastEditors: qwguo
             * @description: 编辑此项
             * @param {type} 参数说明
             * @return: 返回值
             */
            editDepartmentSubmit() {
                let that = this;
                updateDepartment({
					  customerId: storage.getItem('customerId'),
                    ...that.addFrom
                }).then(res => {
                    if (res.status == 200 && res.data.code == 0) {
                        that.addDataDialog = false;
                      that.$message.success('更改成功');
						 that.getDepartmentFun();
                    }else {
                        that.$message.warning(res.data.data);
                    }
					
                });
            },
            /**
             * @Date: 2020-11-02 23:19:57
             * @LastEditors: qwguo
             * @description: 删除部门
             * @param {type} 参数说明
             * @return: 返回值
             */
            deleteDepartmentFun() {
                let that = this;
                // that.$confirm('确定要删除吗？', '确认信息', {
                //     distinguishCancelAndClose: true,
                //     confirmButtonText: '确定',
                //     cancelButtonText: '取消'
                // })
                //     .then(() => {
                        deleteDepartment({
                            id: this.id
                        }).then(res => {
                            if (res.status == 200 && res.data.code == 0) {
                               that.$message.success('删除成功');
                                that.getDepartmentFun();
                            }
                        });
                    // })
                    // .catch(() => {});
            }
        }
    };
</script>

<style lang="scss">
    .GO-section-wrap {
        .btn-area {
            padding-bottom: 20px;
        }

        .el-table {
            thead {
                th {
                    background-color: #f9f9f9;
                    color: #333333;
                    font-weight: 400;
                }
            }

            tbody {
                td {
                    color: #333;
                }
            }
        }

        .add-dialog {
            .el-dialog__title {
                border-left: 3px solid #000;
                padding-left: 30px;
                font-size: 16px;
                font-weight: 500;
            }
        }

        .add-form {
            .el-form-item {
                margin-bottom: 10px;
            }

            .form-btn-area {
                text-align: right;
            }
        }
    }
</style>
